<template>
  <view class="address">
    <!-- 选择收货地址的盒子 -->
    <view
      class="address-choose-box"
      v-if="needAddress && Object.keys(address).length == 0"
    >
      <view class="btnChooseAddress" @click="chooseAddress">
        选择收货地址 +
      </view>
    </view>

    <!-- 渲染收货信息的盒子 -->
    <view
      @click="chooseAddress"
      class="address-info-box"
      v-if="Object.keys(address).length > 0 && needAddress"
    >
      <view class="row1">
        <view class="row1-left">
          <view class="username"
            >收货人：<strong style="font-weight: 600">{{
              address.name
            }}</strong></view
          >
        </view>
        <view class="row1-right">
          <view class="phone">电话：{{ address.phone }}</view>
          <uni-icons type="arrowright" size="32rpx"></uni-icons>
        </view>
      </view>
      <view class="row2">
        <view class="row2-left">收货地址：</view>
        <view class="row2-right"
          >{{ address.class_A }}{{ address.class_B }}{{ address.class_C
          }}{{ address.class_D }}</view
        >
      </view>
    </view>
    <view class="address-info-box" v-if="!hasRealGoods">
      <view class="row3"> 没有需要寄送的商品! </view>
    </view>
    <view class="address-info-box" v-if="upperDoor">
      <view class="address-info-box__title">商品领取方式：</view>
   
      <view class="hintList" v-for="item in hintList" :key="item.id">{{
        item.info
      }}</view>
    </view>
    <!-- 底部的边框线 -->
    <image
      class="address-border"
      src="@/Shop/static/cart_border@2x.png"
    ></image>
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  props: ['needAddress', 'hintList', 'upperDoor', 'hasRealGoods'],
  data() {
    return {}
  },
  onLoad(options) {
    // let uuid = this.loginInfo.uuid
    // this.orderParma.uuid = uuid
    // console.log('kk', this.address)
  },
  methods: {
    ...mapMutations(['updateAddress']),
    chooseAddress() {
      uni.navigateTo({
        url: `/Shop/ShipAddreList`
      })
    }
  },
  computed: {
    ...mapState(['address', 'goodsOrder'])
  }
}
</script>

<style lang="scss" scoped>
.card {
  width: 92%;
  padding: 10px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 15rpx;
  box-shadow: $theme-shadow2;
}

.btnChooseAddress {
  width: 40%;
  text-align: center;
  color: #fafafa;
  line-height: 56rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  background-color: $uni-primary;
}
.address {
  padding-top: 40rpx;
}
.address-border {
  margin: 0 auto 30rpx;
  width: 92%;
  height: 6rpx;
  display: block;
}
.address-choose-box {
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.address-info-box {
  width: 92%;
  min-height: 76px;
  padding: 24rpx;
  margin: 0 auto;
  background-color: #fff;
  // border-radius: 15rpx;
  box-shadow: $theme-shadow2;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  .username {
    display: flex;
  }
  .row1 {
    display: flex;
    justify-content: space-between;
    .row1-right {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .row2 {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .row2-left {
      white-space: nowrap;
    }
  }
  &__title {
    font-size: 28rpx;
    line-height: 48rpx;
    text-align: left;
    font-weight: 600;
    color: $theme-color;
  }
}
.row3 {
  color: $theme-color;
  text-align: center;
  font-size: 28rpx;
}
.hintList {
  color: $theme-color;
  // text-align: left;
  line-height: 48rpx;
  font-size: 24rpx;
}
</style>
